<template>
	<div class="box" ref="box">
		<div class="left">
			
        <VolHeader style="margin: 3px 0" text="查询"> </VolHeader>
        <div class="header">
          <el-row :gutter="20" style="margin-bottom: 1px" justify="center">
            <el-col :span="12"
              ><el-input
                v-model="bom_input"
                placeholder="请输入BOM父件"
                clearable
              >
              </el-input></el-col
            ><el-col :span="3"
              ><el-button @click="select_one" type="primary">
                <el-icon style="vertical-align: middle">
                  <Search />
                </el-icon> </el-button
            ></el-col>
            <el-col :span="6" style=""
              ><el-button @click="bclick" type="primary"
                >加载BOM</el-button
              ></el-col
            >
          </el-row>
        </div>
        <popSelectBomViewForTree ref="popSelectBomViewForTree"></popSelectBomViewForTree>
        <VolHeader style="margin: 1px 0" text="单体BOM结构"> </VolHeader>
        <el-scrollbar style="height: 800px; width: 100%" class="el-role-tree">
          <el-tree
            ref="bomtree"
            :data="bomdata"
            node-key="id"
            :default-expand-all="true"
            @node-expand="node_expand"
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span>
                <i
                  style="font-size: 8px; color: #ff9800; font-style: normal"
                  > <el-icon >
                  <Setting />
                </el-icon>{{ node.label }},{{ data.maktx }}</i
                >
              </span>
            </template>
          </el-tree>
        </el-scrollbar>
     
		</div>
		<div class="resize" title="收缩侧边栏">
			⋮
		</div>
		<div class="mid">
			 <dj_stpo ref="dj_stpo"></dj_stpo>
		</div>
	</div>
</template>
<script>
import {
  Check,
  Delete,
  Setting,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import VolHeader from "@/components/basic/VolHeader.vue";
import dj_stpo from "@/views/djerp/dj_base_data/dj_stpo.vue";
import popSelectBomViewForTree from '@/extension/djerp/other/popSelectBomViewForTree.vue'//
export default {
  components: {
    dj_stpo,
    VolHeader,
    Search,Edit,Setting,
    popSelectBomViewForTree
  },
  created() {
    //初始化一个对象全局缓存起来，当点击左边树形菜单时，把点击菜单的treeId(角色id)存到treeDemo1里
    //this.init_tree();
  },
  mounted(){
    this.dragControllerDiv();
  },

  data() {
    return {
      bomdata: [
        /* {
          label: "U3C6QJH002010P05[U型]",
          f_id: "U3C6QJH002010P05",//本节点的id
          children: [{}],
        }, */
      ],
      bom_input: "100510300109AP", //"U3C6QJH002010P05",
      listrtn: [], //bomList数据
    };
  },
  methods: {
    dragControllerDiv () {
                var resize = document.getElementsByClassName('resize');
                var left = document.getElementsByClassName('left');
                var mid = document.getElementsByClassName('mid');
                var box = document.getElementsByClassName('box');
                for (let i = 0; i < resize.length; i++) {
                    // 鼠标按下事件
                    resize[i].onmousedown = function (e) {
                        //颜色改变提醒
                        resize[i].style.background = '#818181';
                        var startX = e.clientX;
                        resize[i].left = resize[i].offsetLeft;
                        // 鼠标拖动事件
                        document.onmousemove = function (e) {
                            var endX = e.clientX;
                            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

                            if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
                            if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

                            resize[i].style.left = moveLen; // 设置左侧区域的宽度

                            for (let j = 0; j < left.length; j++) {
                                left[j].style.width = moveLen + 'px';
                                mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
                            }
                        };
                        // 鼠标松开事件
                        document.onmouseup = function (evt) {
                            //颜色恢复
                            resize[i].style.background = '#d6d6d6';
                            document.onmousemove = null;
                            document.onmouseup = null;
                            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                        };
                        resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
                        return false;
                    };
                }
            },

    load_tree() {
      this.bomdata.splice(0, this.bomdata.length); //先清空所有的子节点
      var turl = "/api/dj_stpo/get_fert";
      this.http.post(turl, {}, true).then((result) => {
        //console.log(result);
        for (let index = 0; index < result.dj_maras.length; index++) {
          const element = result.dj_maras[index];
          let obj = {
            label: element.matnr + "[" + element.maktx_parenet + "]",
            f_id: element.matnr,
            icon: "el-icon-plus",
            children: [{}],
          };
          this.bomdata.push(obj);
        }
      });
    },
    node_expand(data, node) {},
    handleNodeClick(node, selected) {
      this.$store.getters.data().f_id = node.id;
      this.$refs.dj_stpo.$refs.grid.refresh();
      //console.log(node);
      //console.log(selected);

      /* let one={
          id:node.id,
          label:node.id,
          children:this.CreatTreeData(node.id,res),
        }; */
    },
    bclick() {
      var turl = "/api/dj_stpo/get_bom_all_children?f_id=" + this.bom_input;
      this.http.post(turl, {}, true).then((res) => {
        this.bomdata.splice(0, this.bomdata.length);
        //console.log(this.CreatTreeData(this.bom_input,res));
        let tt = res.find((t) => {
          return t.id == this.bom_input;
        }); //为了查询树形根的物料中文
        let one = {
          id: this.bom_input,
          label: this.bom_input + "," + tt.maktx,
          children: this.CreatTreeData(this.bom_input, res),
        };
        //console.log(one);
        this.bomdata.push(one);
        //console.log(this.bomdata);
        this.listrtn.splice(0, this.listrtn.length);
        this.TreeDataToList(this.bomdata);
        let rtn = [];
        for (let index = 0; index < this.listrtn.length; index++) {
          const e = this.listrtn[index];
          rtn.push(e.id);
        }
        this.$store.getters.data().f_id = rtn.toString(",");
        this.$refs.dj_stpo.$refs.grid.refresh();
       // if (this.$store.getters.data().f_id.length>0) this.$refs.dj_stpo.$refs.grid.refresh();
        //console.log(rtn.toString(",")); //数组转为逗号间隔的字符串
      });
    },

    TreeDataToList(treeData) {
      //treedata转换为父子list，2022年11月6日 20:17:57 by huangxs
      for (let index = 0; index < treeData.length; index++) {
        const e = treeData[index];
        //console.log(e);
        if (e.children) {
          //循环每个节点，判断每个节点是否有孩子
          for (let ei = 0; ei < e.children.length; ei++) {
            //有孩子，逐个把孩子插入数组
            const ec = e.children[ei];
            let t = {
              id: ec.label,
              parentid: e.label,
            };
            this.listrtn.push(t);
          }
          this.TreeDataToList(e.children); //如果有孩子就递归
        }
      }
    },
    CreatTreeData(currid, list) {
      //创建树形结构数据,currid为数的根节点，list为父子二位表
      const rtn = [];
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        if (element.parentId === currid) {
          //说明有孩子
          const children = this.CreatTreeData(element.id, list);
          if (children.length > 0) {
            element.children = children;
            element.f_id = currid;
          }
          rtn.push(element);
        }
      }
      return rtn;
    },
    select_one(){
        //console.log(this.$refs);
        this.$refs.popSelectBomViewForTree.open_w();
    }
  },
};
</script>
<style>
  /* 拖拽相关样式 */
    /*包围div样式*/
    .box {
        width: 100%;
        height: 100%;
        margin: 1% 0px;
        overflow: hidden;
        box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
    }
    /*左侧div样式*/
    .left {
        width: calc(25% - 10px);  /*左侧初始化宽度*/   
        height: 100%;
        background: #FFFFFF;
        float: left;
    }
    /*拖拽区div样式*/
    .resize {
        cursor: col-resize;
        float: left;
        position: relative;
        top: 45%;
        background-color: #d6d6d6;
        border-radius: 5px;
        margin-top: 20%;
        width: 10px;
        height: 100%;
        background-size: cover;
        background-position: center;
        /*z-index: 99999;*/
        font-size: 32px;
        color: white;
    }
    /*拖拽区鼠标悬停样式*/
    .resize:hover {
        color: #444444;
    }
    /*右侧div'样式*/
    .mid {
        float: left;
        width: 68%;   /*右侧初始化宽度*/
        height: 100%;
        background: #fff;
        box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
    }
  </style>

